<script setup lang="ts">
import LoginBox from './components/LoginBox.vue'
</script>

<template>
  <div class="loginView">
    <div class="left">
      <div class="sign">
        <div class="tech-text"><h1>Sign In to</h1></div>
        <div class="tech-text"><h1>Open the World</h1></div>
        <div class="leftI"><h2>School of Qilu Tansportation,</h2></div>
        <div class="leftI"><h2>Shan Dong University</h2></div>
      </div>
    </div>

    <div class="right">
      <div class="loginBox">
        <LoginBox />
      </div>
    </div>
  </div>
</template>

<style scoped>
.loginView {
  width: 100vw;
  height: calc(100vh - 60px);
  display: flex;
}

.left {
  width: 55%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; /* 保持原有背景色 */
}

h1 {
  font-size: 60px;
  position: relative;
  margin: 10px 0;
}

/* 主标题科技特效 */
.tech-text {
  position: relative;
  display: inline-block;
}

.tech-text::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.3), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: textGlowPulse 4s infinite alternate;
}

.tech-text h1 {
  text-shadow:
    0 0 5px rgba(156, 12, 19, 0),
    0 0 10px rgba(156, 12, 19, 0.503),
    0 0 20px rgba(156, 12, 19, 0.216);
  animation: textShimmer 3s infinite alternate;
}

.tech-subtext::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;

  filter: blur(10px);
  z-index: -1;
  animation: subtextGlow 6s infinite alternate;
}

.sign {
  width: 470px;
  position: relative;
}

.leftI {
  color: #8e8e8e;
  font-size: 12px;
  margin: 5px 0;
}

.right {
  width: 45%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginBox {
  width: 400px;
  height: 600px;
  /* background-color: aqua; */
}
</style>
